<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                        </template>
                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
                            {{ subItem.title }}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import bus from "../common/bus";
export default {
  data() {
    return {
      collapse: false,
      items: [
        {
          icon: "el-icon-news",
          index: "dashboard",
          title: "综合管理"
        },

        {
          icon: "el-icon-menu",
          index: "table",
          title: "运营管理",
          subs: [
            {
              index: "machineList",
              title: "售卖机报表"
            },
            {
              index: "vendingMachineProducts",
              title: "账户商品库"
            },
            {
              index: "replenishmentLog",
              title: "货道商品变更查询"
            },
            {
              index: "vendingMachineProductLog",
              title: "账户商品库变更查询"
            },
            {
              index: "vendingMachineError",
              title: "售货机错误日志"
            },

            {
              index: "machinesTempLog",
              title: "售货机温度信号曲线图"
            },
            {
              index: "machinesChangeLog",
              title: "售货机配置和等温控日志"
            },
            {
              index: "vendingMachineMsg",
              title: "错误短信查询"
            },

            {
              index: "locationMap",
              title: "售货机线路图"
            },

            {
              index: "replenishSuggest",
              title: "补货管理"
            },
            {
              index: "rateShortsList",
              title: "缺货报表"
            },
            {
              index: "advertisingManagement",
              title: "广告管理"
            },
            {
              index: "advertisingState",
              title: "广告状态"
            },
            {
              index: "vendingMachinePositionRecord",
              title: "售货机GPS位置记录"
            },
            {
              index: "waitCheckItem",
              title: "待审核商品管理"
            },
            {
              index: "machineErrorType",
              title: "售货机错误类型柱状图"
            }
          ]
        },
        {
          icon: "el-icon-message",
          index: "tabs",
          title: "统计报表",
          subs: [
            {
              index: "salesRecord",
              title: "销售记录"
            },
            {
              index: "statisticsPayPerDay",
              title: "销售日报"
            },
            {
              index: "statisticsPayPerItem",
              title: "商品销售统计"
            },
            {
              index: "itemReport",
              title: "商品报表"
            },
            {
              index: "vmReport",
              title: "售卖机报表"
            }
          ]
        },
        {
          icon: "el-icon-setting",
          index: "",
          title: "总部配置",
          subs: [
            {
              index: "form",
              title: "售货机类型管理"
            },
            {
              index: "editor",
              title: "售货机基础信息配置"
            },
            {
              index: "markdown",
              title: "售货机采购信息管理"
            },
            {
              index: "upload",
              title: "商品基础信息表"
            },
            {
              index: "upload",
              title: "数据字典维护"
            },
            {
              index: "upload",
              title: "售货机初始化"
            },
            {
              index: "upload",
              title: "文件管理列表"
            },
            {
              index: "upload",
              title: "商品类别管理"
            },
            {
              index: "upload",
              title: "公众号解绑"
            }
          ]
        }
      ]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", msg => {
      console.log(msg);

      this.collapse = msg;
    });
  }
};
</script>

<style scoped>
.el-menu--inline .el-menu-item {
  height: 35px;
  line-height: 35px;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
